<template>
    <div class="clocking-container">
        <div class="section attendance">
            <div class="section-title">
                <img style="width: 38rpx;margin-right: 8rpx;" src="/static/icons/day@2x.png" alt="">
                <text style="line-height: 38rpx;">考勤时间</text>
            </div>
            <div class="subTitle">Your schedule for the day</div>
            <div class="schedule-row">
                <div class="schedule-card" v-for="(item, idx) in schedule" :key="idx">
                    <div class="schedule-top">
                        <div class="schedule-date">{{ item.date }}</div>
                        <div class="schedule-week">{{ item.week||'星期一' }}</div>
                    </div>
                    <div class="schedule-time">{{ item.start }} AM</div>
                    <div class="schedule-time">{{ item.end }} PM</div>
                </div>
            </div>
        </div>

        <div class="section clocking-point">
            <div class="section-title">
                <uv-icon name="map-fill" size="19" color="#fff"></uv-icon>
                <text>Clocking point</text>
            </div>
            <div class="point-list">
                <div class="point-item" v-for="(point, idx) in points" :key="idx">
                    {{ point }}
                </div>
            </div>
        </div>

        <div class="section supplementary">
            <div class="section-title">
                <uv-icon name="calendar" size="19" color="#fff"></uv-icon>
                <text>Supplementary timecard rule</text>
            </div>
            <div class="supplementary-content">
                <div style="margin: 16rpx 0;">You can apply for a replacement timecard if you have not punched in the
                    timecard</div>
                <div>You can apply for a replacement timecard up to 10 times per month, and you can apply for a
                    replacement timecard within the past month.</div>
            </div>
        </div>
    </div>
</template>

<script>
import { getWeekAttends } from '@/api/attendace'
export default {
    data() {
        return {
            schedule: [
                { date: '2025-3-24', week: '星期一', start: '09:00', end: '18:00' },
                { date: '2025-3-25', week: '星期二', start: '09:00', end: '18:00' },
                { date: '2025-3-26', week: '星期三', start: '09:00', end: '18:00' },
                { date: '2025-3-27', week: '星期四', start: '09:00', end: '18:00' },
                { date: '2025-3-28', week: '星期五', start: '09:00', end: '18:00' },
                { date: '2025-3-29', week: '星期六', start: '09:00', end: '18:00' },
                { date: '2025-3-30', week: '星期日', start: '09:00', end: '18:00' }
            ],
            points: [
                '130 Xihai Street, Shenzhen City, Guangdong Province',
                '130 Xihai Street, Shenzhen City, Guangdong Province'
            ]
        }
    },
	created(){
        getWeekAttends({}).then(res =>{
            this.rule = res.attendance_rule
            this.schedule = res.list
            console.log('date', res)
        })
    },
}
</script>

<style scoped lang="scss">
.clocking-container {
    padding: 32rpx 20rpx 20rpx 20rpx;
    background: #f5f6fa;
    min-height: 100vh;
}

.section {
    background: #fff;
    color: #fff;
    border-radius: 20rpx;
    margin-bottom: 32rpx;
    padding: 40rpx 170rpx 40rpx 30rpx;
    box-shadow: 0 4rpx 16rpx rgba(30, 203, 108, 0.06);
}
.attendance{
    padding-right: 40rpx;
    .schedule-row{
        overflow-x: scroll;
        padding-bottom: 10rpx;
    }
}
.section-title {
    font-size: 32rpx;
    font-weight: bold;
    display: flex;
    align-items: center;

}

.subTitle {
    font-size: 24rpx;
    line-height: 32rpx;
    color: #5a6273;
    margin-top: 4rpx;
    margin-bottom: 24rpx;
}

.section-title .icon {
    font-size: 36rpx;
    margin-right: 12rpx;
}

.schedule-row {
    display: flex;
    flex-direction: row;
    gap: 18rpx;
}

.schedule-card {
    background: #fff;
    border-radius: 16rpx;
    flex: 1;
    width: 192rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    border-radius: 10px 10px 10px 10px;
    border: 1px solid #EAECF0;

    .schedule-top {
        background: #F9FAFB;
        width: 192rpx;
        padding: 20rpx 0;
        border-bottom: 1rpx solid #EAECF0;
        margin-bottom: 19px;
    }
}

.schedule-date {
    font-size: 24rpx;
    color: #1a2233;
    font-weight: 500;
    margin-bottom: 24rpx;
}

.schedule-week {
    font-size: 24rpx;
    color: #5a6273;
    margin: 6rpx 0;
}

.schedule-time {
    font-size: 28rpx;
    color: #475467;
    text-align: center;
    font-style: normal;
    font-weight: bold;
    margin-bottom: 38rpx;
}

.clocking-point {
    background: url('/static/image/kaoqing.png') 100% 100% no-repeat;
    background-size: 100% 100%;

    .point-list {
        margin-top: 10rpx;
    }
}

.supplementary {

    background: url('/static//image/daka.png') 100% 100% no-repeat;
    background-size: 100% 100%;
}

.point-item {
    font-size: 24rpx;
    margin-bottom: 8rpx;
    padding-left: 8rpx;
    font-weight: 500;
    color: #B8CEE7;
    // border-left: 4rpx solid #1ecb6c;
}

.supplementary-content {
    font-size: 24rpx;
    color: #F6FEF9;
    margin-top: 10rpx;
}
</style>